<template>
  <div class="title-divider-container">
    <div class="container">
      <span class="orange-bar-left"></span>
      <span class="text-description">{{ titleText }}</span>
      <span class="orange-bar-right" :style="{ width: barWidth }"></span>
      <span class="more-text" @click="handleMoreClick">{{ moreText }}</span>
      <span class="orange-bar-left"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewestTitle',
  props: {
    titleText: {
      type: String,
      default: '没设置'
    },
    moreText: {
      type: String,
      default: '更多'
    },
    barWidth: {
      type: String,
      default: '400px'  // 默认宽度
    }
  },
  methods: {
    goToCategory(selectedItem) {
      try {
        this.$router.replace({
          name: 'category',
          params: { selectedItem },
        });
      } catch (err) {
        if (err.name !== 'NavigationDuplicated') {
          console.error('导航失败:', err);
        }
      }
    },
    handleMoreClick() {
      console.log(this.titleText);
      if (this.titleText == '最新文章') {
        this.goToCategory('全部')
      }
    }
  }
}
</script>

<style scoped>
.title-divider-container {
  width: 100%;
}

.container {
  display: flex;
  align-items: center;
}

.orange-bar-left {
  width: 30px;
  height: 1.8px;
  background-color: #ff4d4f;
}

.orange-bar-right {
  height: 1.8px;
  background-color: #ff4d4f;
}

.text-description {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: bold;
  margin: 0 10px;
}

.more-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  margin: 0 10px;
  cursor: pointer;
  transition: color 0.2s ease;
  font-weight: bold;
}

.more-text:hover {
  color: #ff4d4f;
}
</style>